<template>
	<view class="search-box" :style="'margin:'+margin+'%;'">
		<view class="tab-view">
			<view class="tab-item" :class="searchType==0 && 'on'" @click="searchType=0">近似</view>
			<view class="tab-item" :class="searchType==1 && 'on'" @click="searchType=1">注册号</view>
			<view class="tab-item" :class="searchType==2 && 'on'" @click="searchType=2">申请人</view>
			<view class="tab-item" :class="searchType==3 && 'on'" @click="searchType=3">机构</view>
		</view>
		<view class="input-view">
			<input class="input" confirm-type="search" v-model="searchKeyword" @confirm="search" :placeholder="name" />
			<button class="button" :disabled="searchDisabled" @click="search">搜索</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		margin: {
			type : Number,
			default : 0
		},
		name: String
	},
	data() {
		return {
			pickers : ['近似','注册号','申请人','机构'],
			searchType : 0,
			searchDisabled : false,
			searchKeyword : ''
		}
	},
	mounted() {
	},
	methods: {
		search() {
			if(this.searchKeyword.length > 0){
				if(!this.searchDisabled){
					this.searchDisabled = true
					let that = this
					setTimeout(()=>{that.searchDisabled = false},1000)
					uni.navigateTo({url: '/pages/search/index?keyword='+this.searchKeyword+'&searchType='+this.searchType})
				}
			}else{
				uni.showModal({
					title: '提示',
					content: '请输入关键词!',
					showCancel : false
				})
			}
		}
	}
}
</script>

<style lang='scss'>
	.search-box{
		background: #ffffff;
		.tab-view {
			padding:0 30upx;
			display: flex;
			justify-content: flex-start;
			border-bottom:1px solid #eee;
			.tab-item{
				font-size: 32upx;
				color: #666;
				padding: 20upx;
			}
			.on{
				color: $uni-color-primary;
				border-bottom:2px solid $uni-color-primary;
			}
		}
		.input-view {
			width: 100%;
			padding: 10upx 0;
			.button{
				margin: 20upx;
				height: 80upx;
				line-height: 80upx;
				background : $uni-color-primary;
				color: #fff;
				border-radius:10upx;
			}
			.input{
				margin: 20upx;
				height: 80upx;
				line-height: 80upx;
				padding-left: 5%;
				border-radius:20upx;
				text-align: left;
				font-size: 32upx;
				color:$font-color-base;
				background: rgba(230,230,230,.6);
			}
		}
	}
</style>